<template>
  <div>
    <!-- 悬浮框 -->
    <ul class="levitate_box">
      <li>
        <ImgT src="/imgs/club/checkgame.png" @click="showPopup" alt="" />
      </li>
      <li>
        <ImgT src="/imgs/club/mini.png" @click="showOverlay" alt="" />
      </li>
    </ul>

    <!-- mimi -->
    <nut-overlay v-model:visible="isShowWin" :close-on-click-overlay="false">
      <MiniGameSelector
        :items="gameItems"
        @game-click="handleGameClick"
      />
    </nut-overlay>

    <!-- popup -->
    <nut-popup v-model:visible="isPopup" position="right" style="width: 80%; height: 100%">
      <div class="game_title">
        <img src="/imgs/club/game.png" alt="">
        <span>其他游戏</span>
      </div>
      <SwitchGames
        v-for="game in gameLists"
        :key="game.id"
        :icon="game.icon"
        :title="game.title"
        :description="game.description"
        :isLocked="game.isLocked"
        @click="handleSwitchGameClick(game)"
      />
    </nut-popup>
  </div>
</template>

<script lang="ts" setup>
import { ref  } from "vue";
import MiniGameSelector from './miniGameSelector.vue';
import SwitchGames  from './switchGames.vue';

// const emit = defineEmits(['checkGame', 'miniClick']);

const isShowWin = ref(false);
const isPopup = ref(false);

const showOverlay = () => {
  isShowWin.value = true;
};

const showPopup = () => {
  isPopup.value = true;
};

const gameItems: any = ref([
  { icon: "/imgs/club/mimi1.png", label: "德州PK" },
  { icon: "/imgs/club/mimi1.png", label: "21点" },
  { icon: "/imgs/club/mimi1.png", label: "跑得快" },
  { icon: "/imgs/club/mimi1.png", label: "跑得快" },
  { icon: "/imgs/club/mimi1.png", label: "跑得快" },
  { icon: "/imgs/club/mimi1.png", label: "跑得快" },
  { icon: "/imgs/club/mimi1.png", label: "跑得快" },
  { icon: "/imgs/club/mimi1.png", label: "跑得快" },
])
  
const gameLists:any = ref([
  {
    id: 1,
    icon: "/imgs/club/mimi1.png",
    title: "德州PK",
    description: "游戏信息简介介绍",
    isLocked: false,
  },
  {
    id: 2,
    icon: "/imgs/club/mimi1.png",
    title: "21点",
    description: "游戏信息简介介绍",
    isLocked: false,
  },
  {
    id: 3,
    icon: "/imgs/club/mimi1.png",
    title: "跑得快",
    description: "游戏信息简介介绍",
    isLocked: true,
  },
  {
    id: 4,
    icon: "/imgs/club/mimi1.png",
    title: "德州HPK",
    description: "游戏信息简介介绍",
    isLocked: true,
  },
])

const handleGameClick = (item: any) => {
  console.log('item', item)
  // emit('checkGame', item);
  isShowWin.value = false
};

const handleSwitchGameClick = (game: { id: number; title: string }) => {
  console.log('game', game)
  // emit('miniClick', game);
};
</script>

<style scoped lang="scss">
.levitate_box {
  width: 72px;
  min-height: 72px;
  position: fixed;
  right: 15px;
  bottom: 86px;
  z-index: 99;
  li {
    margin: 6px 0;

    img {
      width: 72px;
       height: 72px;
    }
  }   
}

:deep(.nut-popup) {
  background: #100E26;

  .game_title {
    margin: 40px 0 12px 14px;
    img {
      width: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: top;
    }
    span {
      color: #FFF;
      text-align: center;
      font-family: "PingFang SC";
      font-size: 16px;
      font-weight: 600;
    }
  }
}
</style>